<template>
  <view class="container">
    <view class="bg-view"> </view>
    <view class="table-view">
      <view class="header-view">
        <image
          :src="
            userInfo
              ? userInfo.avatarUrl
              : require('@/static/cart_empty@2x.png')
          "
        ></image>
        <text>{{ userInfo ? userInfo.nickName : "黑猫优购" }}</text>
      </view>
      <view class="menu-view">
        <view v-for="(item, index) in menuList" :key="index">
          <text>{{ index == 1 ? collectCount : item.count }}</text>
          <text>{{ item.text }}</text>
        </view>
      </view>
      <view class="order-view">
        <text>我的订单</text>
        <view class="order-list">
          <view
            class="order-item"
            v-for="(item, index) in oderList"
            :key="index"
          >
            <image
              :src="require('@/static/my-icons/' + item.image)"
              mode="widthFix"
            ></image>
            <text>{{ item.text }}</text>
          </view>
        </view>
      </view>
      <view class="cell-view">
        <view
          class="cell-item"
          v-for="(item, index) in cellList"
          :key="index"
          @click="cellAction(index)"
        >
          <text>{{ item }}</text>
          <uni-icons type="arrowright" size="18"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapMutations, mapState } from "vuex"

export default {
  data() {
    return {
      menuList: [
        { count: 0, text: "收藏的店铺" },
        { count: 0, text: "收藏的商品" },
        { count: 0, text: "关注的商品" },
        { count: 0, text: "足迹" },
      ],
      oderList: [
        { image: "icon1.png", text: "待付款" },
        { image: "icon2.png", text: "待收货" },
        { image: "icon3.png", text: "退款退货" },
        { image: "icon4.png", text: "全部订单" },
      ],
      cellList: ["收货地址", "联系客服", "退出登录"],
    }
  },

  methods: {
    cellAction(index) {
      if (index == 2) {
        uni.showModal({
          title: "提示",
          content: "确认退出登录吗？",
          success: (result) => {
            if (result.confirm) {
              this.login(null)
              this.$mrouter.push("/pages/login/index")
            }
          },
        })
      }
    },

    ...mapMutations(["login"]),
  },

  computed: {
    ...mapState(["userInfo", "collectList"]),

    collectCount() {
      return this.collectList.length
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f1f1f1;
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
  .bg-view {
    background-color: #c00000;
    width: 100%;
    height: 500rpx;
  }

  .table-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 20rpx;
    .header-view {
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        margin-top: 60rpx;
        width: 200rpx;
        height: 200rpx;
        border: 5rpx solid white;
        border-radius: 100rpx;
      }

      text {
        margin-top: 10px;
        color: white;
      }
    }
    .menu-view {
      display: flex;
      padding: 20rpx;
      margin-top: 50rpx;
      background-color: white;
      border-radius: 20rpx;

      view {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 28rpx;
        width: 33.33%;

        text:first-child {
          margin-bottom: 10rpx;
        }
      }
    }
    .order-view {
      padding: 20rpx;
      margin-top: 20rpx;
      background-color: white;
      border-radius: 20rpx;
      font-size: 30rpx;

      .order-list {
        display: flex;
        justify-content: space-between;
        margin-top: 30rpx;
        .order-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 0 20rpx;

          image {
            width: 65rpx;
          }

          text {
            margin-top: 10rpx;
            font-size: 28rpx;
          }
        }
      }
    }

    .cell-view {
      margin-top: 20rpx;
      padding: 0 20rpx;
      background-color: white;
      border-radius: 20rpx;
      font-size: 30rpx;

      .cell-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 85rpx;
      }
    }
  }
}
</style>
